<template>
	<view class="container">
		<view class="p20">
			<picker :range="classes" @change="onSelectClasses" range-key="name">
				<view class="tcenter">{{selectclass.name ? selectclass.name : '选择班级'}}</view>
			</picker>
		</view>
		<view class="flex-ja-ca">
			<view @click="pre"><</view>
			<view>
				<view class="tcenter">
					{{showdate}}
				</view>
				<view class="tcenter">
					{{weeks[currentdate.week]}}
				</view>
			</view>
			<view @click="next">></view>
		</view>
		<view class="course-container">

			<view v-for="(item,index) in times1" :key="index" class="time-item">
				<view class="time">
					{{item.time}}
				</view>
				<view class="course f12" >
					<view class="" v-for="(citem,cindex) in item.course" :key="cindex" :style="{ position:'absolute', top: 80*(citem.margintop-1) + 'px', left: 200/item.course.length * cindex + 'px',  width: 200/item.course.length + 'px', height: 80 * citem.timelenght + 'px', background: citem.background}">
						<view>{{citem.coursename}} - {{citem.teacher}}</view>
						<view>{{citem.time}}</view>
						<view>{{citem.room}}</view>
					</view>
				</view>
			</view>

			<!-- <view class="flex-ja-cc">
				<view v-for="(item,index) in course" :key="index" class="course-wrap f12">
					<view v-for="(citem,cindex) in item" :key="cindex" class="course-item">
						<view>{{citem.coursename}} - {{citem.teacher}}</view>
						<view>{{citem.time}}</view>
						<view>{{citem.room}}</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {checkUserinfo,wx_login} from '@/request/checkUserinfo'
	export default {
		data() {
			return {
				classes: [],
				selectclass: {},
				times1: [],
				from: 'students',
				currentdate: {
					week: '',
					year: '',
					month: '',
					day: '',
					
				},
				weeks: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
			};
		},
		computed:{
			showdate: function() {
				let month = this.currentdate.month
				let day = this.currentdate.day
				if(month < 10) {
					month = '0' + month
				}
				if(day < 10) {
					day = '0' + day
				}
				return this.currentdate.year + '-' + month + '-' + day
			}
		},
		onLoad(e) {
			this.from = e.from || 'students'
			this.getFullday()
			this.gettablist()			
		},
		methods: {
			onSelectClasses(event) {
				this.selectclass = this.classes[event.detail.value]
				this.gettablist()
			},
			gettablist(){
				const BASE_URL = uni.BASE_URL
				var userinfo = uni.getStorageSync('userinfo')
				if(userinfo.uid=='' || !userinfo.uid){
					uni.navigateTo({
						url:'../login/login'
					})
				}
				uni.request({
					url: BASE_URL+'index/classes/index',
					data:{
						type: this.from,
						id:userinfo.uid,
						classesid: this.selectclass.id || 0,
						date: this.showdate
					},
					method:'POST',
					success:(res) =>{
						this.times1 = res.data.data.list
						this.classes = res.data.data.classes
						console.log(res.data.data);
					},
					fail:(res)=> {
						console.log(res);
					}
				});
				
			},
			getFullday(type) {
				let that = this
				let date = new Date()
				if(type == 'next') {
					date.setFullYear(that.currentdate.year)
					date.setMonth(that.currentdate.month - 1)
					date = date.setDate(that.currentdate.day + 1)
					date = new Date(date)
				} else if(type == 'pre') {
					date.setFullYear(that.currentdate.year)
					date.setMonth(that.currentdate.month - 1)
					date = date.setDate(that.currentdate.day - 1)
					date = new Date(date)
				}
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()
				let week = date.getDay()
				this.currentdate.year = year
				this.currentdate.month = month
				this.currentdate.day = day
				this.currentdate.week = week
			},
			pre() {
				this.getFullday('pre')
				this.gettablist()
			},
			next() {
				this.getFullday('next')
				this.gettablist()
			}
		},
		mounted() {
		},
	}
</script>

<style scoped>
	.course-container{
		padding: 10px;
		position: relative;
	}
	.time-item{
		width: 50px;
		height: 80px;
		line-height: 80px;
		text-align: center;
		border-bottom: 1px solid #ccc;
	}
	.course{
		position: absolute;
		left: 70px;
		padding: 10px;
		line-height: 1.5;
		color: #fff;
	}
	.f12{
		font-size: 12px;
	}
	.p20{
		padding: 20px;
	}
	.h40{
		height: 40px;
	}
	.flex{
		display: flex;
	}
	.flex1{
		flex: 1;
	}
	.flex-ja-ca{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.flex-ja-cc{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tcenter{
		text-align: center;
	}
</style>
